<template>
	<div>
		<div class="comment_header">
			{{headTitle}}
			<span class="iconfont icon-mjiantou-copy" @click='prev'></span>
		</div>
		<ul class="serviceList" v-if='type==6' :style='{height:conheight}'>
			<li v-for="item in list" @click="goInfo(item.news_Id)" :key=item.index>
				<div class="left" v-hide="item.images==''">
					<img :src="item.images" />
				</div>
				<div class="right">
					<p class="p1">{{item.title}}</p>
					<p class="p2">
						{{item.createtime}}
						<i class="iconfont icon-icons64x6481">{{item.read}}</i>
					</p>
				</div>
			</li>
		</ul>
		<ul class="serviceList" v-if='type==7'>
			<li v-for="item2 in list2" :key=item2.index @click="goInfo(item2.Id)" style="height: 1.3rem;overflow: hidden;">
				<div class="right" style="margin-left: 5%;">
					<p class="p1">{{item2.title}}</p>
					<p class="p2">
						开始时间：{{item2.start_time}}<br />
						结束时间：{{item2.end_time}}
						<!--<i class="iconfont icon-icons64x6481">{{item.read}}</i>-->
					</p>
				</div>
			</li>
		</ul>
		<ul class="serviceList" v-if='type==3'>
			<ul class="choose_ul">
				<li :class="{true:'active',false:''}[showindex==1]">
					行业新闻
				</li>
				<li>
					活动报道
				</li>
				<li>
					报名通道
				</li>
			</ul>
			<li v-for="item in list" @click="goInfo(item.Id,item.href)" v-show="showindex==1" :key=item.index>
				<div class="right" style="margin-left: 5%;">
					<p class="p1">{{item.name}}</p>
					<p class="p2">
						{{item.time}}
					</p>
				</div>
			</li>
			<li v-for="item2 in list2" :key=item2.index @click="goInfo(item2.Id)" v-show="showindex==2" style="height: 1.3rem;overflow: hidden;">
				<div class="right" style="margin-left: 5%;">
					<p class="p1">{{item2.title}}</p>
					<p class="p2">
						开始时间：{{item2.start_time}}<br />
						结束时间：{{item2.end_time}}
						<!--<i class="iconfont icon-icons64x6481">{{item.read}}</i>-->
					</p>
				</div>
			</li>
			<div v-if="showindex==3" style="width: 90%;height: auto;margin: 0 auto;padding-top: 0.2rem;">
				<p v-html="content"></p>
			</div>
		</ul>
		<div class="serviceList" v-if='type==4'>
			<div style="width: 90%;height: auto;margin: 0 auto;padding-top: 0.2rem;">
				<p v-html="content "></p>
			</div>
			<!--<div  class="list_div" ng-repeat="item4 in list" ng-click="goInfo(item4.Id)">
			<div class="img_warp">
				<img ng-src="{{item4.feng_img}}">
				<div class="feng_title">
					<p>{{item4.feng_title}}</p>
				</div>
			</div>	
			<p>
				<span>{{item4.two_title}}</span>
				<img ng-src="{{item4.two_img}}"/>
			</p>
		</div>-->
		</div>
		<div class="serviceList" v-if='type==5'>
			<ul class="choose_ul">
				<li :class="{true:'active',false:''}[showindex==1]" @click="handClick()" style="width: 50%;">
					合作伙伴
				</li>
				<li :class="{true:'active',false:''}[showindex==2]" @click="handClickType()" style="width: 50%;">
					合作方式
				</li>
			</ul>
			<div class="partner" v-for="item in partner" :key=item.index v-show="showindex==1">
				<img :src="item.img" />
				<div class="partner_content">
					<h4>{{item.name}}</h4>
					<p v-html="item.content">
					</p>
				</div>
			</div>
			<div v-show="showindex==2" style="width: 90%;height: auto;margin: 0 auto;padding-top: 0.2rem;">
				<p v-html="content"></p>
			</div>
		</div>
		<div class="serviceList" v-if='type==8'>
			<div style="width: 90%;height: auto;margin: 0 auto;padding-top: 0.2rem;">
				<p v-html="content"></p>
			</div>
		</div>
		<!-- <div v-show = "page.rongcuo" class="rongcuo">
		<p style="padding-top: 1.5rem;"><i class="iconfont icon-wuneirong"></i></p>
		<p>暂无内容</p>
		<p>
			<a href="javascript:;">
				<span>去逛逛</span>
			</a>
		</p>
	</div> -->
	</div>
</template>

<script>
	export default {
		name: 'ServiceList',
		data() {
			return {
				headTitle: '',
				type: '',
				list: '',
				list2: '',
				showindex: '1',
				content: '',
				partner: '',
				conheight: ''
			}
		},
		created() {
			//控制底部footer组件隐藏
			this.$emit('footer', false)
			this.type = this.$route.params.index
			this.headTitle = this.$route.params.name
			let type = this.type
			if (type == 3) {
				this.showindex = 1
				this.$axios.get('Message/headline_list', {
					params: {
						user_Id: localStorage.getItem("user_ID"),
						token: localStorage.getItem("token"),
					}
				}).then(res => {
					console.log(res)
					this.list = res.data.list
				}).catch(err => console.log(err))

			} else if (type == 4) {
				this.$axios.get('Picture/regiment', {
						params: {
							user_Id: localStorage.getItem("user_ID"),
							token: localStorage.getItem("token"),
							type: 2
						}
					})
					.then(res => {
						this.content = '敬请期待！'
					})
					.catch(err => console.log(err))
			} else if (type == 5) {
				this.$axios.get('master/partner', {
						params: {
							user_Id: localStorage.getItem("user_ID"),
							token: localStorage.getItem("token")
						}
					})
					.then(res => {
						this.partner = res.data.list
					}).catch(err => console.log(err))
			} else if (type == 6) {

			} else if (type == 7) {

			} else {

			}
			window.addEventListener('scroll', this.getHeight);
			this.getHeight()
		},
		methods: {
			prev() {
				this.$router.go(-1)
			},
			handClick() {
				this.showindex = 1
			},
			handClickType() {
				this.showindex = 2
				this.$axios.get('Picture/partner_way', {
						params: {
							user_Id: localStorage.getItem("user_ID"),
							token: localStorage.getItem("token")
						}
					})
					.then(res => {
						this.content = res.data.list.content
					}).catch(err => console.log(err))
			},
			getHeight() {
				this.conheight = window.innerHeight - 45 + 'px'
				console.log(this.conheight)
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.wh(@w, @h) {
		width: @w;
		height: @h;
	}

	.serviceList {
		width: 100%;
		margin-top: 1.2rem;
		li {
			.wh(100%, 1.5rem);
			border-bottom: 0.01rem solid #F6F6F6;

			.left {
				float: left;
				.wh(18.75%, 1.1rem);

				img {
					margin: 0.25rem 0.3rem;
					.wh(0.6rem, 0.6rem);
				}
			}

			.right {
				.wh(81.25%, 1.1rem);
				float: left;

				.p1 {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin: 0.2rem 0;
					font-size: 0.24rem;
					color: #404040;
				}

				.p2 {
					font-size: 0.2rem;
					color: #c7c7c7;
					padding-right: 0.3rem;

					i {
						font-size: 0.16rem;
						float: right;
					}
				}
			}
		}

		.choose_ul {
			width: 100%;
			height: 1.2rem;
			line-height: 1.2rem;
			position: relative;
			background: #fff;
			z-index: 21;
			text-align: center
		}

		.choose_ul li {
			.wh(33.3%, 1.2rem);
			float: left;
			border-right: 0;
		}

		.choose_ul .active {
			color: #FE8A76;
			border-bottom: 0.02rem solid #FE8A76;
		}

		.list-paddingleft-2 li {
			border-bottom: 0;
		}
	}

	.list_div {
		margin-top: 0.28rem;
		.wh(90%, auto);
		margin-left: 5%;
		box-sizing: border-box;
		overflow: hidden;
		border: 0.01rem solid #F6F6F6;

		.img_warp {
			.wh(100%, 2.85rem);
			position: relative;
			overflow: hidden;

			img {
				.wh(100%, auto);
			}

			.feng_title {
				position: absolute;
				.wh(100%, 0.6rem);
				left: 0;
				bottom: 0;

				background: rgba(0, 0, 0, 0.5);

				p {
					line-height: 0.6rem;
					font-size: 0.22rem;
					color: #fff;
					margin-left: 0.1rem;
				}
			}
		}

		p {
			.wh(100%, 0.9rem);
			line-height: 0.9rem;

			span {
				font-size: 0.2rem;
				color: #A8A8A8;
				float: left;
				display: inline-block
			}

			img {
				margin-right: 0.28rem;
				margin-top: 0.13rem;
				.wh(0.8rem, 0.8rem);
				float: right;
			}
		}
	}

	.partner {
		.wh(100%, auto);
		padding: 0 5%;
		box-sizing: border-box;
		overflow: hidden;
		border-bottom: 0.2rem solid #F6F6F6;

		img {
			margin-top: 0.28rem;
			.wh(2.15rem, 1.25rem);
		}

		.partner_content {
			.wh(100%, auto);
			padding-bottom: 0.4rem;

			h4 {
				text-align: center;
				font-size: 0.36rem;
				line-height: 0.8rem;
			}

			p {
				font-size: 0.32rem;
				color: #A8A8A8;
			}
		}
	}

	.readNum {
		.wh(100%, auto);
		padding: 0 5%;

		.iconfont {
			font-size: 0.16rem;
			color: #C7C7C7;
		}

		.active {
			color: #FE8A76;
		}
	}
</style>
